<template>
  <div>
    <h1>精品推荐</h1>
    <div class="Recommend-container">
      <div class="Recommend-div" v-for="list in lists" :key="list.game_base_id">
        <div>
          <div>
            <img src="../../image/01.webp" class="Recommend-img" />
          </div>
        </div>
        <div>
          <div>
            <div class="Recommend-title">{{ list.game_name }}</div>
            <div class="Recommend-main">
              {{ list.summary }}
            </div>
            <div class="Recommend-text">
              <div>
                <svg
                  t="1668171126972"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3693"
                  width="14"
                  height="14"
                >
                  <path
                    d="M956.741665 419.885046c-5.241374-16.200984-19.178805-28.054963-36.034704-30.496571l-254.931157-44.791136L551.77233 115.15981c-7.444553-15.248286-22.992667-24.898063-40.025599-24.898063-17.036002 0-32.522718 9.648754-40.146349 24.898063L357.655238 344.597339 102.784456 390.936737c-16.856923 2.442632-30.852682 14.295588-36.035728 30.496571-5.300726 16.141632-0.893346 33.951253 11.317767 45.804209l184.407963 170.410158-48.186466 247.662613c-2.859118 16.737196 3.930519 33.833573 17.809621 43.720757 13.244652 13.244652 40.562834 6.90834 47.053666 3.514033l232.595452-113.64634L742.85225 932.545078c6.490831 3.394307 32.166607 11.373025 47.052642-3.514033 13.760398-9.887184 20.787442-26.982538 17.869996-43.720757L761.077334 637.647675l184.467315-172.018795C957.69641 453.836299 962.043415 436.026678 956.741665 419.885046z"
                    p-id="3694"
                    fill="#1296db"
                  ></path>
                </svg>
                <span class="Recommend-num">{{ list.grade }}</span>
                <span class="Recommend-textnum"
                  >{{ list.comment_number }}人评</span
                >
              </div>
              <div class="Recommend-tag">
                <span class="Recommend-tagtext">{{ list.category_name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "RecommenDation",
  data() {
    return {
      page_num: 1,
      page_size: 10,
      lists: [],
    };
  },
  mounted() {
    this.getMyList(this.page_num, this.page_size);
  },
  methods: {
    async getMyList(page_num, page_size) {
      const result = await axios.get(
        `/pc/game/home/page_recommend_game_list?page_num=${page_num}&page_size=${page_size}`
      );
      console.log(result.data.data);
      this.lists = result.data.data;
    },
  },
};
</script>

<style lang="less" scoped>
h1 {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  line-height: 32px;
  width: 1160px;
  margin: 0 auto;
}
.Recommend-container {
  width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.Recommend-div {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 270px;
  height: 186px;
}

.Recommend-img {
  width: 270px;
  height: 100%;
  border-radius: 10px 10px 0 0;
}
.Recommend-title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  margin: 0 20px 0;
  height: 24px;
  line-height: 24px;
}
.Recommend-main {
  transition: 0.3s;
  height: 0;
  opacity: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  padding: 0 20px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Recommend-div:hover .Recommend-main {
  height: 24px;
  opacity: 1;
}
.Recommend-div:hover {
  height: 200px;
}
.svg-img {
  height: 14px;
  width: 14px;
}
.Recommend-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 20px;
}

.Recommend-tagtext:hover {
  border-color: #007aff;
  color: #007aff;
  cursor: pointer;
}
.Recommend-num {
  font-family: Helvetica;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  padding: 0 4px;
}
.Recommend-textnum {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
}
.Recommend-tag {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
  height: 22px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.Recommend-tagtext {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 0 none;
  padding: 0 6px 0 4px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin: 0 6px;
  line-height: 22px;
  height: 22px;
  position: relative;
  box-sizing: border-box;
  border-color: rgba(0, 0, 0, 0.1);
}
.Recommend-tagtext:before {
  content: "";
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-color: inherit;
  top: 50%;
  transform: translateY(-50%) rotate(50deg) skew(10deg);
  left: -7px;
  box-sizing: border-box;
  border-bottom-left-radius: 4px;
}
</style>
